<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
html事件是发生在html元素上的事情,当html页面中使用js时,js能够应对这些事件.
html 事件可以是浏览器或用户做的某些事情
html 网页完成加载
html 输入字段被修改
html 按钮被点击
当事件发生时,用户会希望做某件事.js允许您事件被侦测到执行代码
通过js代码 html 允许向html元素添加事件处理程序
<element event='一些 JavaScript'>
<element event="一些 JavaScript">

常见的html 事件
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

js能够做什么
事件处理程序可用处理,验证用户输入,用户动作和浏览器动作
每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当用户点击按钮时应该被执行的动作
当用户输入数据时应该被验证的内容

js字符串  用于存储和操作文本
js字符串是引号中的零个或多个字符
var x = "Bill Gates"
使用内建属性length 可返回字符串的长度

特殊字符 由于字符串必须由引号包围,js会误解这段字符串
var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"
该字符串将被切为 中国是瓷器的故乡，因此 china 与 避免此问题的解决方法是 \ 转义字符
\' 单引号
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

长代码行换行 为了最佳可读性,程序通常会避免每行代码超过80个字符串,如果某条js 语句不适合一整行 那么最佳换行位置是某个运算符之后
字符串也可以是对象
但是请不要将字符串创建为对象,它会拖慢执行速度.new 关键字使代码复杂化.当使用 == 相当运算符时,相等字符串是相等的
当使用 == 相等运算符时，相等字符串是相等的：
当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。

字符串方法
字符串方法和属性
原始值 比如 bill  无法拥有属性和方法 因为它们不是对象
但是 js 方法和属性也可用于原始值,因为在执行方法和属性时js将原始值视为对象
字符串长度 length 属性返回字符串的长度
查找字符串中的字符串 indexOf() 方法返回字符串中指定文本首次出现的索引位置

js从零开始计算 0 是字符串中的第一个位置 1是第二个
lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本 indexOf() 和 lastIndexOf() 均返回 -1
两种方法都接受作为检索起始位置的第二个参数
var pos = str.indexOf("China",18)
lastIndexOf() 方法向后进行检索从尾到头 这意味着假如第二个参数是 50 ,则从位置50 开始检索,直到字符串的起点

检索字符串中的字符串
search() 方法搜索特定值的字符串,并返回匹配的位置
indexOf() 和 search() 是相等的
这两种方法是不相等的.区别在于
search() 方法无法设置第二个开始位置参数
indexOf() 方法无法设置更强大的搜索值 (正则表达式)

提取部分字符串
有3种提取部分字符串的方法
slice(start,end)
substring(start,end)
substr(start,length)

slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分.该方法设置两个参数: 起始索引 开始位置,终止索引 结束位置

如果某个参数为负,则从字符串的结尾开始计数
裁剪字符串中 位置-12到位置-6的片段
var res = str.slice(-13,-7);

省略第二个参数,则该方法将裁剪字符串的剩余部分
var res = str.slice(7);

从结尾计数
var res = str.slice(-13)

substring() 方法 类似于 slice() 不同于substring() 无法接受负的索引
var res = str.substring(7,13);

substr() 方法类似于 slice() 不同之处在于第二个参数规定被提取部分的长度
var res = str.substr(7,6)
如果省略第二个参数,则该substr()将裁剪字符串的剩余部分
var res = str.substr(7);

如果首个参数为负,则从字符串的结尾计算位置
var res = str.substr(-5);
第二个参数不能为负，因为它定义的是长度。

替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

replace() 方法不会改变调用它的字符串.它返回的是新字符串
默认 replace() 只替换首个匹配
默认的  replace 对大小写敏感 因此不匹配 microsoft

如需执行大小写不敏感的替换,请使用正则表达式 /i 大小写不敏感
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

如需替换所有匹配,使用正则表达式的 g 标志 用于全局搜索
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");

转换为大写和小写
通过 toUpperCase() 把字符串转换为大写
var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

通过 toLowerCase() 把字符串转换为小写
var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1

concat() 方法
concat() 连接两个或多个字符串
var text1 = "hello";
var text2 = "world";
text3 = text1.concat("",text2);

concat() 方法可用于代替加法运算符
var text = "Hello" + "" +"world!";
等价与
var text = "Hello".concat("","world!")
所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说：字符串是不可变的：字符串不能更改，只能替换。

String.trim()
trim() 方法删除字符串两端的空白符：
var str = "       Hello World!        ";
alert(str.trim());

提取字符串字符
这是两个提取字符串字符的安全方法：

charAt(position)
charCodeAt(position)

charAt() 方法
charAt() 方法返回字符串中指定下标（位置）的字符串：
var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
var str = "HELLO WORLD";
str.charCodeAt(0);         // 返回 72

属性访问（Property Access）
ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]：

把字符串转换为数组
可以通过 split() 将字符串转换为数组：

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。

如果分隔符是 ""，被返回的数组将是间隔单个字符的数组：

实例
var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

js 字符串搜索
用于搜索字符串的js方法
string.indexOf()
  indexOf() 方法返回指定文本在字符串中第一次出现（的位置）的索引：
  let str = "Please locate where 'locate' occurs!";
  str.indexOf("locate")    // 返回 7

string.lastIndexOf()
  lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
  let str = "Please locate where 'locate' occurs!";
  str.lastIndexOf("locate")    // 返回 21
如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：

这两种方法都接受第二个参数作为搜索的开始位置：
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate", 15)    // 返回 21

lastIndexOf() 方法向后搜索（从末尾到开头），意思是：如果第二个参数是 15，则从位置 15 开始搜索，一直搜索到字符串的开头。
let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate", 15)    // 返回 7

String.search()
search() 方法在字符串中搜索指定值并返回匹配的位置：
let str = "Please locate where 'locate' occurs!";
str.search("locate")     // 返回 7

search() 方法不能接受第二个起始位置参数。
indexOf() 方法不能采用强大的搜索值（正则表达式）。

string.match()
match() 方法根据正则表达式在字符串中搜索匹配项 并将匹配项作为 array 对象返回
如果正则表达式不包含g 修饰符 执行全局搜索 ,match() 方法将只返回字符串的第一个匹配项
语法
  string.match(regexp)
  regexp 必须.需要搜索的值,为正则表达式
  返回 数组 包含匹配项 每个匹配项对应一个项目 若未找到匹配项则为null

String.includes()
如果字符串包含指定值，includes() 方法返回 true。
检查字符串是否包含 world 从位置12还是搜索
let text = "Hello world, welcome to the universe.";
text.includes("world", 12)    // 返回 false

string.startWith()
如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false：
let text = "Hello world, welcome to the universe.";

text.startsWith("Hello")   // 返回 true

string.endWith()
注释：startsWith() 方法区分大小写。

Internet Explorer 不支持 startsWith() 方法。
String.endsWith()
如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false：

实例
检查字符串是否以 "Gates" 结尾：

var text = "Bill Gates";
text.endsWith("Gates")    // 返回 true

检索以 "world" 结尾的字符串的前 11 个字符：

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11)    // 返回 true


-->
<body>
<h4>js 事件</h4>
<button onclick="document.getElementById('demo').innerHTML=Date()">时间是?</button>
<P id="demo"></P>
<p>可以通过js代码改变id=demo的元素内容,代码使用 this.innerHTML改变了其自身元素的内容</p>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
<p>点击按钮来显示日期,通过事件属性调用函数</p>
<button onclick="displayDate()">时间是?</button>
<p id="demo1"></p>
<p>length 属性返回字符串的长度:</p>
<p id="demo2"></p>
<p>折行的最佳位置是运算符或逗号之后</p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<p id="demo7"></p>
<p id="demo8"></p>
<p id="demo9"></p>
<button onclick="myFunction1()">试一试!</button>
<p id="demo10">请访问 microsoft 和 microsoft!</p>
<p>在字符串中搜索 "ain"</p>
<p id="demo11"></p>
<p id="demo12"></p>
<p id="demo13"></p>

<script>
  function displayDate() {
    document.getElementById('demo1').innerHTML = Date();
  }

  var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  document.getElementById('demo2').innerHTML = txt.length;
  document.getElementById('demo3').innerHTML =
    "Hello Kitty.";
  // x 是字符串
  var x = "Bill";
  // y 是对象
  var y = new String("Bill");
  document.getElementById("demo4").innerHTML = typeof x + "<br>" + typeof y;
  document.getElementById("demo5").innerHTML = (x == y);
  document.getElementById("demo6").innerHTML = (x === y);
  var str = "The full name of China is the People's Republic of China.";
  var pos = str.indexOf("China");
  document.getElementById("demo7").innerHTML = pos;
  var pos1 = str.lastIndexOf("China");
  document.getElementById("demo8").innerHTML = pos;
  var pos2 = str.search("locate")
  var str1 = "Apple, Banana, Mango"
  var res = str1.slice(7,13);
  document.getElementById("demo").innerHTML=res;
  function myFunction1(){
    var str = document.getElementById("demo10").innerHTML;
    var txt = str.replace("microsoft","w3school");
    document.getElementById("demo10").innerHTML=txt;
  }
  let text = "The rain in SPAIN stays mainly in the plain";
  // 对ail 执行全局搜索
  document.getElementById("demo11").innerHTML = text.match(/ain/g);
  // 对ail 执行不区分大小写的全局搜索
  document.getElementById("demo12").innerHTML = text.match(/ail/gi)
  // 检查字符串是否包含word
  document.getElementById("demo13").innerHTML = text.includes("world");
</script>
</body>
</html>
